<template>
  <div :id="id" class="heat-box" :style="{ height: width, width }">
    <DotaMap :width="width" :maxWidth="width" />
  </div>
</template>
<script>
import DotaMap from '@/components/DotaMap/index'
import { defineProps, ref, onUpdated } from 'vue'
import h337 from 'heatmap.js'
</script>
<script setup>
const props = defineProps({
  id: {
    type: String,
    defalut: 'chart',
  },
  data: {
    type: Array,
    defalut: [],
  },
})
const screenWidth =
  document.body.clientWidth > 560 ? 560 : document.body.clientWidth - 20
const width = ref(`${screenWidth}px`)
const scaleAndExtrema = (points, scalef, max) => {
  const newPoints = points.map((p) => ({
    x: Math.floor(p.x * scalef - screenWidth / 2.3),
    y: Math.floor(screenWidth * 1.44 - p.y * scalef),
    value: Math.sqrt(p.value),
  }))
  const vals = newPoints.map((p) => p.value)
  const localMax = Math.max(...vals)
  return {
    min: 0,
    max: max || localMax,
    data: newPoints,
  }
}
const drawHeatmap = (points, heatmap) => {
  const adjustedData = scaleAndExtrema(points, screenWidth / 137, null)
  console.log(adjustedData)
  heatmap.setData(adjustedData)
}

onUpdated(() => {
  const heatmap = h337.create({
    container: document.getElementById(props.id),
    radius: 15 * (screenWidth / 600),
  })
  drawHeatmap(props.data, heatmap)
})
</script>
<style lang="scss" scoped>
  .heat-box{
     position: relative;
     img {
        height: 100%;
        max-width: 100%;
      }
      canvas{
        transform: rotateX(180deg);
      }
  }
</style>
